<template>
  <div class="home">
    <!-- 在子组件中使用 :变量名=value  的方式向子组件传递数据，子组件通过 props 接收-->
    <HelloWorld :msg="fatchData" ref="childEl" @setValueName="setValueName" />
    <div>父组件</div>
    <div>
      <button @click="changeChildMsg">父组件按钮</button>
      <button @click="getSon">children/parent</button>
    </div>
    <div class="homeBrother">
      <Brother />
      <YoungerBrother />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Brother from '@/components/Brother.vue'
import YoungerBrother from '@/components/YoungerBrother.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,
    Brother,
    YoungerBrother
  },
  data () {
    return {
      fatchData: '我是父组件通过props传递给子组件的文字',
      parentTitle: '我是父组件'
    }
  },
  mounted () {
    console.log(this.$children)
  },
  // 通过 provide 提供的数据可以在该组件层次之下的任何组件使用
  provide () {
    return {
      // 可以传递普通字符串
      provideName: '这是祖先的数据',
      // 也可以传递一个异步方法
      getOrderInfo: () => {
        return this.getOrderList()
      }
    }
  },
  methods: {
    // 传递一个异步方法获取数据，用来模拟接口请求
    getOrderList () {
      return new Promise((resolve, reject) => {
        // 倒计时两秒模拟请求
        setTimeout(() => {
          resolve({
            code: 'WX15485613548',
            name: '农夫安装工单'
          })
        }, 2000)
      })
    },
    // 点击父组件的按钮修改子组件中显示的文字
    changeChildMsg () {
      this.fatchData = '通过按钮修改了子组件中显示的问题'
      // 父组件调用子组件的方法并传递参数
      this.$refs.childEl.showText('我来自父组件')
    },
    // 该方法是由子组件触发的
    setValueName (data) {
      alert(data) //= > 我是通过子组件传递过来的
    },
    // 子组件调用这个方法
    parentHandle () {
      console.log('我是父组件的方法')
    },
    // 通过 this.$children 获取子组件实例
    getSon () {
      console.log(this.$children)
      console.log(this.$children[0].sonTitle) //= > 我是子组件
      this.$children[0].sonHandle() //= > 我是子组件的方法
    }
  }
}
</script>
<style scoped>
.home {
  width: 500px;
  height: 500px;
  border: 1px solid salmon;
  text-align: center;
  padding: 10px;
}
.homeBrother{
  text-align: center;
  padding: 15px;
  border: 1px solid springgreen;
}
</style>
